<template>
  <div class="noticeContent">
    <div class="title">
      <div class="line"></div>
      <div class="name" style="margin-right: 10px" @click="handleUser">用户管理</div>
      <div class="name">角色管理</div>
      <div class="btns">
        <div class="btn add">新增</div>
        <div class="btn">导出</div>
      </div>
    </div>
    <div class="content">
      <CommonTablePage :columns="userColumns" :tableData="tableData">
        <template #role="{ row }">
          <!-- {{row.permissionList}} -->
          <span class="role" v-for="(item, index) in row.permissionList" :key="index">{{
            roleMap[item]
          }}</span>
        </template>

        <template #edit="{ row }">
          <span @click="handleEdit(row)" class="edit">更改权限</span>
        </template>
      </CommonTablePage>
    </div>
    <changeDialog v-if="changeDialog" :changeDialog.sync="changeDialog" :curRow="curRow" @makeSure="makeSure">
    </changeDialog>
  </div>
</template>
<script>
import { userColumns } from "./columns";
import changeDialog from "./components/changeDialog.vue";
import { getTableData, editRole } from "@/api/role"
import { viewMinix } from "@/minix/viewMinix.js";

export default {
  components: {
    changeDialog,
  },
  mixins: [viewMinix],

  data() {
    return {
      curRow: {},
      userColumns,
      tableData: [
        {
          name: "球员",
          role: [
            {
              id: "0",
              label: "首页",
            },

            {
              id: "4",
              label: "日程管理",
            },
            {
              id: "5",
              label: "通知管理",
            },
          ],
          id: "1",
        },
        {
          name: "教练",
          role: [
            {
              id: "0",
              label: "首页",
            },
            {
              id: "1",
              label: "球员管理",
            },
            {
              id: "2",
              label: "比赛管理",
            },
            {
              id: "3",
              label: "训练管理",
            },
            {
              id: "4",
              label: "日程管理",
            },
            {
              id: "5",
              label: "通知管理",
            },
          ],
          id: "2",
        },
        {
          name: "管理员",
          role: [
            {
              id: "0",
              label: "首页",
            },
            {
              id: "1",
              label: "球员管理",
            },
            {
              id: "2",
              label: "比赛管理",
            },
            {
              id: "3",
              label: "训练管理",
            },
            {
              id: "4",
              label: "日程管理",
            },
            {
              id: "5",
              label: "通知管理",
            },
            {
              id: "6",
              label: "权限管理",
            },
          ],
          id: "3",
        },
      ],
      roleMap: {
        home: '首页',
        playerManage: '球员管理',
        raceManage: '比赛管理',
        trainManage: '训练管理',
        dManage: '日程管理',
        notice: '通知管理',
        permissionManage: '权限管理'
      },
      roleList: [
        {
          id: "0",
          label: "首页",
          path: '/home'
        },
        {
          id: "1",
          label: "球员管理",
          path: '/playerManage'
        },
        {
          id: "2",
          label: "比赛管理",
          path: '/raceManage'
        },
        {
          id: "3",
          label: "训练管理",
          path: "/trainManage",

        },
        {
          id: "4",
          label: "日程管理",
          path: "/dManage",

        },
        {
          id: "5",
          label: "通知管理",
          path: "/notice",
        },
        {
          id: "6",
          label: "权限管理",
          path: "/permissionManage",
        },
      ],
      changeDialog: false,
    };
  },
  created() {
    this.getTableData()
  },
  methods: {
    async getTableData() {
      let data = {
        page: {
          ...this.pageInfo
        },
      }
      const res = await getTableData(data)
      this.tableData = res.data.records.map(item => {
        if (item.permissionList) {
          return {
            ...item,
            permissionList: item.permissionList.split(',')

          }
        } else {
          return {
            ...item,
            permissionList: []
          }
        }
      })
      this.pageInfo.total = res.data.total * 1
    },
    handleUser() {
      this.$router.push("/permissionManage");
    },
    handleEdit(row) {
      this.curRow = row;
      this.changeDialog = true;
    },
    async makeSure(val) {

      let data = {
        id: this.curRow.id,
        permissionArray: val
      }
      const res = await editRole(data)
      if (res.code == 200) {
        this.$message.success('修改成功')
        this.getTableData()
      } else {
        this.$message.error(res.msg)
      }
      this.changeDialog = false;
    }
  },
};
</script>

<style lang="less" scoped>
.noticeContent {
  height: 100%;
  display: flex;
  flex-direction: column;

  .title {
    display: flex;
    align-items: center;
    height: 70px;
    padding: 10px;
    padding-left: 30px;
    background-color: #fff;
    font-weight: 600;
    border-radius: 5px;
    margin-bottom: 15px;
    .name {
      cursor: pointer;
    }
    .btns {
      display: flex;
      margin-left: auto;

      .add {
        margin-right: 8px;
      }
    }

    .line {
      height: 20px;
      background-color: #fc7414;
      width: 6px;
      margin-right: 10px;
    }

    .btn {
      margin-left: auto;
      width: 68px;
      height: 32px;
      font-size: 16px;
      font-weight: normal;
      color: #fff;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fc6c09;
      cursor: pointer;
    }
  }

  .search {
    height: 80px;
    margin-top: 15px;
    padding: 10px;
    padding-left: 30px;
    height: 80px;
    display: flex;
    align-items: center;
    background-color: #fff;

    .inputItem {
      display: flex;
      align-items: center;
      margin-right: 20px;

      span {
        margin-right: 8px;
      }
    }

    .btns {
      margin-left: auto;
      display: flex;

      .btn {
        width: 68px;
        height: 32px;
        font-size: 16px;
        font-weight: normal;
        color: #fff;
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fc6c09;
        cursor: pointer;
      }

      .reset {
        background-color: #fff;
        color: #fc6c09;
        border: 1px solid #fc6c09;
        margin-left: 8px;
      }
    }
  }

  .content {
    margin-top: 15px;
    padding: 15px 10px 10px 30px;
    flex: 1;
    display: flex;
    background-color: #fff;

    .role {
      margin-right: 6px;
    }

    .edit {
      color: #fc6c09;
      cursor: pointer;
    }
  }
}
</style>
